<template>
	<view class="yzm_body">
		<view class="zhuti">
			<view :class="['msg', msgColor]">{{msg}}</view>
			<view class="title">拖动下方滑块完成拼图</view>
			<movable-area>
				<view id="msg" v-if="zhutuPic === ''">{{msgText}}</view>
				<view id="pic" v-else :style="{'background-image': 'url('+zhutuPic+')'}"></view>
				<view id="line"></view>
				<movable-view
					:style="{'background-image': 'url('+futuPic+')'}" :x="x" :damping="100" direction="horizontal"
					@change="onChange" @touchend="touchEnd">
					<view class="blue"></view>
				</movable-view>
			</movable-area>
			<view class="close iconfont icon-guanbi1" @click="$emit('close')"></view>
		</view>
	</view>
</template>
<script>
    import {
        requestUrl
	} from '../../common/config.js';
	export default{
		props:{
			session_id: {type: Number, default: 0},
			send_type: {type: String, default: ''},
		},
		data(){
			return {
				zhutuPic: '',//主图
				futuPic: '',//缺口图
				x: 10,//当前的位置
				msg: '安全验证',//提示信息
				msgColor: '',
				msgText: '加载中',
				huadong: false,//是否已经滑动
				pic_width: 0
			};
		},
		mounted(){//该组件被挂载到实例上去之后调用
			this.shuaxin()
			//#ifdef H5
				if(this.$isPc === true){//PC端
					document.body.addEventListener('mouseup', this.touchEnd);//鼠标抬起事件
				}
			//#endif
		},
		beforeUnmount(){//实例销毁之前调用。在这一步，实例仍然完全可用
			//#ifdef H5
				if(this.$isPc === true){//PC端
					document.body.removeEventListener('mouseup', this.touchEnd);//鼠标抬起事件
				}
			//#endif
		},
		methods: {
			shuaxin(){
				var self = this;
                var param = {session_id:self.session_id};
                
                this.$http.request({
					url:'/auth/verificationCreate',
					method:'POST',
					data:param,
					success: (res) => {
						if (res.data.code == 200) {
							// todo验证码
							self.zhutuPic = requestUrl+'/Auth/yzm_zhutu?session_id='+self.session_id+'&time='+(new Date() * 1);
    						self.futuPic = requestUrl+'/Auth/yzm_futu?session_id='+self.session_id+'&time='+(new Date() * 1);
    						self.$nextTick(function(){
    							var query = uni.createSelectorQuery().in(self)
    							query.select('#pic').boundingClientRect(res => {
    								if(res){
    									if(res.width){
    										self.pic_width = res.width;
    									}
    								}
    							}).exec();
    						})
						}
					}
				});
			},
			//拖动过程中触发、
			onChange(e){
				var self = this;
				//只有是手动触发的，才执行
				if(e.detail.source === 'touch'){
					self.huadong = true
					self.x = e.detail.x
				}
			},
			//抖动 【总耗时 500ms】
			doudong(){
				var self = this;
				setTimeout(() => {
					if(self.huadong){return}
					self.x -= 15;
					setTimeout(() => {
						if(self.huadong){return}
						self.x += 30
						setTimeout(() => {
							if(self.huadong){return}
							self.x -= 30
							setTimeout(() => {
								if(self.huadong){return}
								self.x += 30
								setTimeout(() => {
									if(self.huadong){return}
									self.x = 10
								},100);
							},100);
						},100);
					},100);
				},100);
			},
			//手指离开了
			touchEnd(){
				var self = this;
				//只有拖动过后松开，才会触发，当然这个主要是应对pc端的（pc端是监听body的松开），移动端没这问题
				if(self.huadong === true){
					self.msg = '验证中...'
					self.msgColor = '';
					var param = {};
					if(self.pic_width > 0){
						param.hk_x = parseInt(self.x * (679 /self.pic_width));
					}else{
						param.hk_x = parseInt(self.x * (679 / uni.upx2px(550)));
					}
					param.mobile = self.session_id;
					if(self.send_type == 'login'){
						param.check_member_on = 1;//检查如果不存在返回提示
					}else if(self.send_type == 'register'){
						param.check_member_off = 1;//检查如果存在返回提示
					}
                    this.$http.request({
    					url: '/auth/verificationCode',
    					method: 'POST',
    					data:JSON.stringify(param),
    					success: (ret) => {
    					var res = ret.data;
                        if (res.code == 200) {
                            uni.showToast({
								title:'发送验证码成功',
								icon:'none'
							})
                            this.$emit('success', res);
    						this.$emit('close');
    					} else {
                            if(!res.msg)res.msg='验证失败';
                            var first = res.msg.substr(0,1);
                            var end = res.msg.substr(-1,1);
                            if(first=='{' && end=='}'){
                                var message = JSON.parse(res.msg);
                                if(message){
                                    res.msg = message.msg;
                                    res.yzm_code= message.yzm_code?message.yzm_code:'';
                                    res.code= message.code?message.code:'';
                                }else{
                                    res.yzm_code= 'off';
                                    res.code= '';
                                }
                            }else{
                                res.yzm_code= 'off';
                                res.code= '';
                            }
                            uni.showToast({
								title:res.msg,
								icon:'none'
							})
                            if(res.yzm_code == 'off'){
    							self.huadong = false;
    							self.doudong()
    							self.msg = res.msg;
    							self.msgColor = 'red';
    							setTimeout(() => {
    								self.shuaxin()
    							},500);
    							setTimeout(() => {
    								self.msg = '安全验证'
    								self.msgColor = ''
    							}, 3500);
    						}else{
    							self.$emit('success', res);
    							self.$emit('close');
    						}
    					}
                            
    					}
    				});
                }
			},
		},
	}
</script>
<style lang="scss">
	@font-face {
	  font-family: "iconfont"; /* Project id 2455983 */
	  src: 
		   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABngAAAJ5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApweQE2AiQDCAsGAAQgBYRnBzEbtgUR1ZMhZH8r7lgI/uPREFlgoVBNm5PkuTjzBokvYm9bLZ7Q8ql1k55Aj4zHA0PJeeB/P9x9MjPtolU0rW5JQ58nSAudRqXRCFGs4ZnI+eCEm0caBUARHIiSJ0Je/uBN7D5M8JMncnEcb597Vhpwgr8zfqrALG7aKReheBK7c9X1PWkpfRCyJ+xa5EeKSpKryiT9ZEEApKX5fpaTvxt1KX8DeuAFkS/0PYVK65ROBxbA6AOlV0sohJmgx6MguyNQSw7DMwIqzVsWN3eXu6g9l5xFp8wZDuT14dw7KcrliCzTfLmgFN2bhZdKiE/xxIv48+FvAqKSxGnaPdsa8bZnd0ECRaUvXa6DPhZRgoRpZMJhf2ZbEtr4pNKTDdLWLPBD8aFbOLRD+Ouc2mrQTcVnknz5UWsjyOloL0YmjSXW1/YPW4yJ8wNQ0CBGoTk8cxF1ZFyBX8NkS3/87kgP5pT/K75uD9c2/dWjVVAsXYoFBF57v7LKf5TB1zsOFctgPsp36An8HfUEJGYzRszXKBEQVWlSKqLSjVPgBBp9m2o03UUhKNd0L74yXTmScoNU5iZRosoiSpVbQqUpW4erNLmWhFyBUTcEQb1XiGq9QVLvHZW59yjR6idK1fuPSsfBOK/KaBD0mlAyGlA/8Lpk6+kc272ie0VJTckn0uJpHNqqqeb3mJHm2LC8XcdswVJJsBMfwxgLTFRG1FwNzFNf17btLZUuSawJJaMB9QOvS7Yhmcvfd0X3ipJA6pmhxVP70FYNQO2VDPU8yCvL23XMFiyVBDt5FsZYYGqfNaLmapiQmvraJVlUqbbX0t8TBnDMuHKnJpJ7yax8KwQA') format('woff2');
	}
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.icon-guanbi1:before {
	  content: "\e696";
	}
	.yzm_body{
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		z-index: 999999;
		width: 750rpx;
		height: 100vh;
		.zhuti{
			background: #FFF;
			width: 600rpx;
			position: absolute;
			top: 50%;left: 50%;
			transform: translate(-50%,-50%);
			padding: 20rpx 25rpx 30rpx 25rpx;
			border-radius: 15rpx;
			.msg{
				color: #999;
				font-size: 24rpx;
				&.red{color: red;}
				&.green{color: green;}
			}
			.close{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #A6A6A6;
				font-size: 36rpx;
				padding: 10rpx;
			}
			.title{
				font-size: 28rpx;
				line-height: 38rpx;
				color: #333;
				margin: 0 0 7rpx 0;
			}
			movable-area{
				width: 100%;
				height: auto;
				#msg{
					width: 100%;
					line-height: 310rpx;
					text-align: center;
					font-size: 30rpx;
					color: #999;
					background: #F8F8F8;
				}
				#pic{
					width: 100%;
					height: 310rpx;
					background-color: #F8F8F8;
					background-size: 100% 310rpx;
				}
				#line{
					background: #e4e4e4;
					width: 100%;
					height: 20rpx;
					margin: 42rpx 0 15rpx 0;
					border-radius: 50rpx;
					display: inline-block;
				}
				movable-view{
					width: 72rpx;height: 310rpx;
					background-size: 100% 310rpx;
					.blue{
						box-shadow: rgba(26, 101, 255, 0.52) 0px 0px 10px 1px;
						width: 100rpx;
						height: 50rpx;
						border-radius: 50rpx;
						position: absolute;
						top: 100%;left: 0;
						background: rgb(26, 101, 255) url() no-repeat;
						background-size: auto 20rpx;
						background-position: 50% 50%;
						margin: 25rpx 0 0 -14rpx;
					}
				}
			}
		}
	}
</style>